<!--
 * @Description:
 * @Autor: qsyj
 * @Date: 2022-12-13 10:24:39
 * @LastEditors: qsyj
 * @LastEditTime: 2023-03-16 16:31:24
-->
<template>
    <view>
        <WTable
            v-bind="$attrs"
            :data="tableData"
            :stripe="stripe"
            :show-header="showHeader"
            :tr-style="trStyle"
            @tableTrClick="tableHandlerClick"
        >
            <template #empty>
                <!-- <WEmpty /> -->
                2222
            </template>
            <template
                v-for="item in $attrs.columns"
                #[item.key]="{ row, $index }"
            >
                <slot
                    :name="item.key"
                    v-bind="{ row, $index, value: getVal(row, item.key) }"
                >
                    <view :key="item.key + $index">
                        {{ getVal(row, item.key) }}
                    </view>
                </slot>
            </template>
        </WTable>
        <view v-if="isShowPagination()" class="pagination">
          分页
           <!-- <WebTablePage
                :total="total"
                :page="query[currentPreConfig.page]"
                :page-size="pageSize"
                @page-change="onChangePage"
                @size-change="onChangeSize"
            /> -->
        </view>
    </view>
</template>
<script>
    import WTable from './table.vue';

    const preConfig = {
        normal: {
            page: 'page',
            pageSize: 'limit',
            formatResponseHandler: data=> ({
                total: data.data.totalCount,
                data: data.data.list,
            }),
        },
        records: {
            page: 'pageNo',
            pageSize: 'pageSize',
            formatResponseHandler: data=> ({
                total: data.data.total,
                data: data.data.records,
            }),
        },

    };

    export default {
        name: 'WebTable',
        components: { WebTablePage, WTable, WEmpty },
        props: {
            preConfigType: {
                type: String,
                default: 'normal',
            },
            data: {
                type: Array,
                default: () => [],
            },
            http: {
                type: Function,
            },
            params: {
                type: Object,
                default: () => ({}),
            },
            handler: {
                type: Function,
            },
            hasPagination: {
                type: Boolean,
                default: true,
            },
            pageSize: {
                type: Number,
                default: 10,
            },
            showHeader: {
                type: Boolean,
                default: true,
            },
            stripe: {
                type: Boolean,
                default: true,
            },
            trStyle: {
                type: Object,
                default: () => ({}),
            },
            hideOnSinglePage: {
                type: Boolean,
                default: true,
            },
        },
        data() {
            return {
                currentPreConfig: preConfig[this.preConfigType],
                tableData: [],
                query: {
                    [preConfig[this.preConfigType].page]: 1,
                    [preConfig[this.preConfigType].pageSize]: this.pageSize,
                },
                total: 0,
            };
        },
        watch: {
            params: {
                handler() {
                    this.reload();
                },
            },
        },
        created() {

            this.featchData();
        },
        methods: {
            getVal(form, s) {
                return s
                    .replace(/\[(\w+)\]/g, '.$1')
                    .replace(/^\./, '')
                    .split('.')
                    .reduce((prev, cur) => prev && prev[cur], form);
            },
            reload() {
                // this.query.page = 1;
                this.setPage(1);
                this.featchData();
            },
            // reFresh() {
            //     this.query.page = 1;
            //     this.featchData();
            // },
            async featchData() {
                let result = {
                    total: 0,
                    data: [],
                };
                if (this.http && typeof this.http === 'function') {
                    let query = {};

                    if (this.hasPagination) {
                        query = Object.assign({}, this.query, this.params);
                    } else {
                        query = Object.assign({}, this.params);
                    }

                    let res = await this.http(query);

                    this.$emit('response', res);

                    if (this.handler && typeof this.handler === 'function') {
                        res = this.handler(res);
                        result = {
                            // 如果不分页 total可以不传
                            total: res.total,
                            data: res.data,
                        };
                    } else {

                        const formatResponseHandler = this.currentPreConfig.formatResponseHandler;
                        const _res = formatResponseHandler(res);

                        result = {
                            total: _res.total,
                            data: _res.data,
                        };
                    }
                } else {
                    result = {
                        total: this.data.length,
                        data: this.data,
                    };
                }
                this.tableData = result.data;
                this.total = result.total;
            },
            onChangeSize(page, size) {

                this.setPage(page);
                this.setPageSize(size);
                // this.query.page = page;
                // this.query.limit = size;
                this.reload();
            },
            onChangePage(page, size) {

                this.setPage(page);
                this.setPageSize(size);
                // this.query = {
                //     ...this.query,
                //     page,
                //     limit: size,
                // };

                this.featchData();
            },

            /**
             *
             * @deprecated
             * emit VTableClickHandler 命名问题被废弃
             * 使用 row-click 代替点击行
             */
            tableHandlerClick(item) {

                this.$emit('VTableClickHandler', item);

                this.$emit('row-click',item);
            },
            isShowPagination() {
                if (this.total === 0) return false;
                if (this.hasPagination) {
                    if (this.hideOnSinglePage && this.total / this.getPageSize() <= 1)
                        return false;

                    return true;
                }

                return false;
            },

            // set
            setPage(val) {
                this.query[this.currentPreConfig.page] = val;
            },
            // get
            getPage() {
                return this.query[this.currentPreConfig.page];
            },
            setPageSize(val) {
                this.query[this.currentPreConfig.pageSize] = val;
            },
            getPageSize() {
                return this.query[this.currentPreConfig.pageSize];
            },
        },
    };
</script>
<style lang="less" scoped>
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
    // padding-top: 1rem;
    // padding-right: 1rem;
}

table {
    width: 100%;
    table-layout: auto;
    font-size: 0.8rem;
    border-collapse: separate;

    thead {
        th {
            height: 3rem;
            line-height: 3rem;
            background-color: #eff8ff;
            text-align: center;
            font-weight: normal;
            color: #333333;
        }
    }
    tbody th {
        color: #333333;
        font-weight: normal;
    }
    tbody tr {
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        background-color: #f2f2f2;
        font-weight: normal;
    }
}
// table header 样式修改
// .table-two {
//     thead {
//       th {
//         color: #025DF4;
//         font-weight: normal;
//       }
//     }
// }

.showBorder {
    border-right: 1px solid #dbddde;
    border-bottom: 1px solid #dbddde;

    thead {
        th {
            height: 3rem;
            line-height: 3rem;
            background-color: #eff8ff;
            text-align: center;
            border-top: 1px solid #dbddde;
            border-left: 1px solid #dbddde;
            font-weight: normal;
        }
    }
    tbody th {
        color: #333333;
        border-left: 1px solid #dbddde;
        border-top: 1px solid #dbddde;
        font-weight: normal;
    }
}

.zb {
    background-color: #fff;
}
</style>
